<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <meta content="IE=edge" http-equiv="X-UA-Compatible">
        <meta content="width=device-width, initial-scale=1" name="viewport">
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.css" rel="stylesheet">
        <link rel="stylesheet" th:href="@{/ztree/css/zTreeStyle/zTreeStyle.css}" type="text/css">
        <title>Hello, world!</title>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-4">.col-md-4</div>
                <div class="col-md-4">.col-md-4</div>
                <div class="col-md-4">.col-md-4</div>
            </div>
            <div class="row">
                <div class="col-md-6">.col-md-6</div>
                <div class="col-md-6">.col-md-6</div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <ul class="ztree" id="treeDemo"></ul>
                </div>
                <div class="col-md-8">
                    <div id="dataTable"></div>
                </div>


            </div>
        </div>
    </body>
    <!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"/>-->
    <script th:src="@{/ztree/jquery.ztree.all.js}"></script>
    <script th:inline="javascript" type="text/javascript">
        $(function () {
            urlConst =/*[[@{/zt/}]]*/
                $.ajax({
                    url: urlConst + `ztree`,  // 发送的路径
                    type: "get",  // 发送方式
                    dataType: 'json',
                    data: {},  // 发送的数据
                    success: (res) => {  // 成功获取到后端返回结果的回调函数
                        console.log(res)
                        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, res);
                    },
                    error: () => {  // 发送失败的回调函数
                        console.log("失败");
                    }
                })

        })

        function zTreeOnClick(event, treeId, treeNode) {
            console.log(treeNode.id + ", " + treeNode.name);
            initTable();
        };

        function initTable() {
            //销毁之前的
            $("#dataTable").bootstrapTable('destroy');
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            /*var nodes = zTree.getCheckedNodes(true);*/
            var nodes = zTree.getSelectedNodes();
            console.log(nodes.length)
            $('#dataTable').bootstrapTable({
                method: 'get',
                url: urlConst + `query/` + nodes[0].name,
                uniqueId: "id",  //每一行的唯一标识，一般为主键列
                method: "get",//请求方式  POST后台拿不到参数
                dataType: "json",//返回数据类型
                search: false,//是否显示表格搜索，此搜索是客户端搜索，不会进服务端
                columns: [{
                    field: 'id',
                    title: 'Item ID'
                }, {
                    field: 'pid',
                    title: 'Item Name'
                }, {
                    field: 'name',
                    title: 'Item Price'
                }]
            });
        }

        var zTreeObj;
        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
        setting = {
            check: {
                enable: false,
                chkStyle: "radio",
                radioType: "all"
            },
            data: {
                simpleData: {
                    enable: true,
                    pIdKey: "pid",
                    rootPId: 0
                }
            },
            view: {
                dblClickExpand: false,
                showLine: true,
                selectedMulti: false
            },
            callback: {
                onClick: zTreeOnClick
            }
        }

        var zNodes = [

            {"id": 1, pId: 0, name: "父节点1 - 展开", open: true},
            {"id": 11, pId: 1, name: "父节点11 - 折叠"},
            {"id": 111, pId: 11, name: "叶子节点111"},
            {"id": 114, pId: 11, name: "叶子节点114"},
            {"id": 12, pId: 1, name: "父节点12 - 折叠"},
            {"id": 121, pId: 12, name: "叶子节点121"}/*,
            {id: 124, pId: 12, name: "叶子节点124"},
            {id: 13, pId: 1, name: "父节点13 - 没有子节点", isParent: true},
            {id: 2, pId: 0, name: "父节点2 - 折叠"},
            {id: 21, pId: 2, name: "父节点21 - 展开", open: true},

            {id: 224, pId: 22, name: "叶子节点224"},
            {id: 23, pId: 2, name: "父节点23 - 折叠"},
            {id: 231, pId: 23, name: "叶子节点231"},
            {id: 3, pId: 0, name: "父节点3 - 没有子节点", isParent: true}*/
        ];

    </script>
</html>
